<!DOCTYPE html>
<html>
<head>
	<title>主页</title>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" type="text/css" href="../dist/css/reset.css">
	<link rel="stylesheet" type="text/css" href="../dist/css/atom.css">
	<link rel="stylesheet" type="text/css" href="../dist/css/checkbox.pretty.css">
	<link rel="stylesheet" type="text/css" href="../dist/css/common.css">
	<link rel="stylesheet" type="text/css" href="../dist/css/font-awesome.min.css">
</head>
<body>
	<!-- header -->
	<header>
		<div class="left">
			<!-- <span class="logo-graphic">A</span> -->
			<i class="fa fa-angle-left"></i>
			<em class="fw-normal">快递单</em>
		</div>
		<div class="right">
			<i class="fa fa-list-ul"></i>
			<ul class="fade nav-list">
				<li><a href="#">标题1</a></li>
				<li><a href="#">标题2</a></li>
				<li><a href="#">标题3</a></li>
			</ul>
		</div>
	</header>
	<!-- header END -->
	<section class="container bg-grey">
		<div class="form-control margin-minus mgt-1">
			<label>收寄局</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-2px">
			<label>收寄日期</label>
			<span>2015-12-01 11:22:99<i class="fa fa-angle-right fz-1_8"></i></span>
		</div>
		<div class="form-control margin-minus mgt-2px">
			<label>寄件人姓名</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-2px">
			<label>电话</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-2px">
			<label>单位名称</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-2px">
			<label>用户代码</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-2px">
			<label>邮政编码</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-2px height-auto">
			<label>地址</label>
			<textarea class="apply-textarea" placeholder="请输入寄件地址(必填)"></textarea>
		</div>
		<div class="mgt-1">
			<input type="checkbox" id="checkbox_a1" class="chk_1" /> 
			<label for="checkbox_a1">文件</label>
			<input type="checkbox" id="checkbox_a2" class="chk_1" /> 
			<label for="checkbox_a2">信函</label>
			<input type="checkbox" id="checkbox_a3" class="chk_1" /> 
			<label for="checkbox_a3">物品</label>
		</div>

		<div class="form-control margin-minus mgt-1 height-auto">
		    <table id="tab11" style="display: none">
		        <tbody>
		            <tr>
		                <td align="center">
		                    <input type="text" name="itemName" /></td>
		                <td align="center">
		                    <input type="text" name="itemQuantity" /></td>
		                <td>
		                    <input type="button" id="Button1" onclick="deltr(this)"  class="btn" value="删除">
		                </td>
		            </tr>
		        </tbody>
		    </table>
		    
		    <table id="itemTable" width="15rem;" border="0" cellspacing="0" cellpadding="0">
		        <thead>
		            <tr>
		                <td align="center">物品名称</td>
		                <td align="center">数量</td>
		                <td></td>
		            </tr>
		        </thead>
		        <tbody>
		            <tr>
		                <td align="center">
		                    <input type="text" name="itemName" /></td>
		                <td align="center">
		                    <input type="text" name="itemQuantity" /></td>
		                <td>
		                    <input type="button" id="Button2" onclick="deltr(this)" class="btn" value="删除">
		                </td>
		            </tr>
		        </tbody>
		    </table>
		</div>
		<div class="form-control margin-minus">
			<input type="button" id="btn_addtr" class="btn addItemBtn" value="增加物品">
		</div>
		<div class="form-control margin-minus mgt-2px">
			<label>是否保价</label>
			<span>
				<input type="radio" id="checkbox_b1" name="approval" class="chk_1" /> 
				<label for="checkbox_b1"  style="height: 2rem; width: 2.5rem; line-height:1rem;">是</label>
				<input type="radio" id="checkbox_b2" name="approval" class="chk_1" /> 
				<label for="checkbox_b2"  style="height: 2rem; width: 2.5rem; line-height:1rem;">否</label>
			</span>
		</div>
		<div class="form-control margin-minus mgt-2px">
			<label>保价金额</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-2px">
			<label>交寄人姓名</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-1">
			<label>收件人姓名</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-2px">
			<label>电话</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-2px">
			<label>单位名称</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-2px">
			<label>城市</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-2px">
			<label>邮政编码</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-2px height-auto">
			<label>地址</label>
			<textarea class="apply-textarea" placeholder="请输入收件地址(必填)"></textarea>
		</div>

		<div class="form-control margin-minus mgt-1">
			<label>重量(kg)</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-2px">
			<label>体积</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-2px">
			<label>资费(￥)</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-2px">
			<label>保价费(￥)</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-2px">
			<label>费用总计(￥)</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-2px">
			<label>收寄人签名</label>
			<input placeholder="" class="apply-input">
		</div>
		<div class="form-control margin-minus mgt-2px height-auto">
			<label>备注</label>
			<textarea class="apply-textarea" placeholder="请输入备注"></textarea>
		</div>

		<button class="btn btn-success mgt-1">提交申请</button>
	</section>
	
	<!-- footer -->
	<footer>
		<ul class="foot-tab-bar">
			<li class="active"><a href="#"><i class="fa fa-home"></i><p>主页</p></a></li>
			<li><a href="#"><i class="fa fa-th-large"></i><p>应用</p></a></li>
			<li><a href="#"><i class="fa fa-users"></i><p>联系</p></a></li>
			<li><a href="#"><i class="fa fa-user"></i><p>我的</p></a></li>
		</ul>
	</footer>
	<!-- footer START -->
	<script type="text/javascript" src="../dist/js/jquery-3.1.1.js"></script>
	<script type="text/javascript" src="../dist/js/equ.js"></script>

    <script type="text/javascript">
        $(function () {
            var show_count = 20;   //要显示的条数
            var count = 1;    //递增的开始值，这里是你的ID
            $("#btn_addtr").click(function () {

                var length = $("#itemTable tbody tr").length;
                //alert(length);
                if (length < show_count)    //点击时候，如果当前的数字小于递增结束的条件
                {
                    $("#tab11 tbody tr").clone().appendTo("#itemTable tbody");   //在表格后面添加一行
                    changeIndex();//更新行号
                }
            });


        });
        function changeIndex() {
            var i = 1;
            $("#itemTable tbody tr").each(function () { //循环tab tbody下的tr
                $(this).find("input[name='NO']").val(i++);//更新行号
            });
        }

        function deltr(opp) {
            var length = $("#itemTable tbody tr").length;
            //alert(length);
            if (length <= 1) {
                alert("至少保留一行");
            } else {
                $(opp).parent().parent().remove();//移除当前行
                changeIndex();
            }
        }
    </script>
</body>
</html>